import React from 'react'
import { Redirect } from 'react-router-dom'
import { List, InputItem, WingBlank, WhiteSpace, Button } from 'antd-mobile'
import { connect } from 'react-redux'
import Logo from '../../component/logo/logo'
import { login } from '../../redux/user.redux'
import formWrapper from '../../component/form-wrapper/form-wrapper'

@connect(
	state => state.user,
	{ login }
)
@formWrapper
export default class Login extends React.Component {

	register = () => {
		this.props.history.push('/register')
	}

	handleLogin = () => {		
		this.props.login(this.props.state)
	}

	render() {
		return (
			<div>
				{this.props.redirectTo&&this.props.redirectTo!=='/login' ? <Redirect to={this.props.redirectTo} /> : null}
				<Logo></Logo>
				<WingBlank>
					<List>
						{this.props.msg ? <p className='err-msg' >{this.props.msg}</p> : ''}
						<InputItem
							onChange={v => this.props.handleChange('user', v)}
						>用户名</InputItem>
						<InputItem type="password"
							onChange={v => this.props.handleChange('pwd', v)}
						>密码</InputItem>
					</List>
					<WhiteSpace></WhiteSpace>
					<Button type="primary"
						onClick={this.handleLogin}
					>登录</Button>
					<WhiteSpace />
					<Button onClick={this.register} type="primary">注册</Button>
				</WingBlank>
			</div>
		)
	}
}